<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绑定手机号</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../phoneCss/commons.css?r=1" rel="stylesheet" />
    <link rel="stylesheet" href="../phoneCss/verify.css">
    <link href="../phoneCss/login.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">绑定手机号</h1>
</header>
<div class="mui-content">
    <ul class="bund-title mui-clearfix">
        <li class="bund-act" id="hasCount">绑定已有账号</li>
        <li id="noCount">新账号授权</li>
    </ul>
    <div class="login2-login-box mui-clearfix">
        <div class="login2-user" id="phoneBox">
            <input id="phone" type="text" placeholder="请输入您的手机号">
        </div>
        <div class="login2-password" id="passloginbox">
            <input class="password" type="password" placeholder="请输入您的密码">
        </div>
        <div class="login2-user" style="display: none;" id="codeBox">
            <input id="code" type="text" placeholder="请输入验证码">
            <a class="code-button">获取验证码</a>
        </div>
        <div class="login-button" id="login-button">绑定并登录</div>
        <div class="login-button" id="login-button2" style="display: none">授权登录并绑定</div>
    </div>
</div>


<!--图片验证码-->
<div class="zhezhao" style="display: none;">
    <div class="zhazhao_box mui-clearfix">
        <div id="close_box"><img id="close" src="../img/close-dialog.png" alt="关闭"></div>
        <h4>请输入图片验证码</h4>
        <div class="mui-clearfix">
            <input type="text" id="code_input" value="" placeholder="输入验证码"/>
            <div id="v_container" style="">
                <img id="imgObj" onclick="changeImg();" alt="验证码" src=""/>
            </div>
            <div class="change_box" id="change" onclick="changeImg();"><img class="change" src="../img/change_one.png" alt="换一个"></div>
        </div>
        <div class="verify_certain" id="verify_certain">确定</div>
        <!--<div class="verify_tips">验证码不区分大小写</div>-->
        <!--<button id="my_button">确定</button>-->
    </div>
</div>

<script src="../js/mui.min.js"></script>
<script src="../js/jquery-1.10.1.min.js"></script>
<script>  document.write("<s"+"cript type='text/javascript' src='../js/common.js?"+Math.random()+"'></scr"+"ipt>"); </script>
<script src="../js/md5.js"></script>
<script type="text/javascript">
    var accessToken = GetQueryString('accessToken'),
        openId = GetQueryString('openId'),
        userId = GetQueryString('userId'),
        Astate = GetQueryString('state');
    $('.bund-title li').click(function () {
        $(this).addClass('bund-act');
        $(this).siblings().removeClass('bund-act');
    })
    $('#hasCount').click(function () {
        $('#login-button,.login2-password').show();
        $('#login-button2,#codeBox').hide();
    })
    $('#noCount').click(function () {
        $('#login-button2,#codeBox').show();
        $('#login-button,.login2-password').hide();
    })
    //老用户授权登录
    $('#login-button').click(function () {
        $.ajax({
            url: '/user/userLoginKey.json',
            dataType: 'json',
            data: {
                name: $('#phone').val(),
                companyCode:getItem('companyCode'),
            },
            success: function (data) {
                if (data.code != 1) {
                    alert(data.msg);
                    return;
                }
                if (data.code == 1) {
                    var passWord = calcMD5($('.password').val() + data.datas.userKey, 32);
                    $.ajax({
                        url:'/OAuth/OAuthOldRegist.json',
                        dataType:'json',
                        data:{
                            accessToken:accessToken,
                            openId:openId,
                            type:Astate,
                            userName:$('#phone').val(),
                            passWord:passWord,
                            companyCode:getItem('companyCode'),
                        },
                        type:'post',
                        beforeSend:function(){
                            $('<div class="loading2"><span class="mui-spinner"></span></div>').appendTo($('body'));
                        },
                        success:function (data) {
                            $('.loading2').hide();
                            if(data.code==1){
                                setItem('token',data.datas.token);
                                setItem('phone',$('#phone').val());
                                setItem('userId',data.datas.userId);
                                window.location.href="index.html";
                            }
                            if(data.code==0){
                                alert(data.msg);
                            }
                        },
                        error:function (data) {
                            alert(data);
                        }
                    })
                }
            }
        });

    })
    //新用户绑定登录
    $('#login-button2').click(function () {
        $.ajax({
            url:'/OAuth/OAuthNewRegist.json',
            dataType:'json',
            data:{
                accessToken:accessToken,
                openId:openId,
                type:Astate,
                userName:$('#phone').val(),
                code:$('#code').val(),
                userId:userId,
                companyCode:getItem('companyCode'),
            },
            type:'post',
            beforeSend:function(){
                $('<div class="loading2"><span class="mui-spinner"></span></div>').appendTo($('body'));
            },
            success:function (data) {
                $('.loading2').hide();
                if(data.code==1){
                    setItem('token',data.datas.token);
                    setItem('phone',$('#phone').val());
                    setItem('userId',data.datas.userId);
                    window.location.href="index.html";
                }
                if(data.code==0){
                    alert(data.msg);
                }
            }
        })
    })

    //发送验证码
    $('.code-button').click(function(){
        sendCode();
    })
    function sendCode() {
        //验证该手机号是否发送过验证码
        $.ajax({
            url:'/imageVerifyC/ifCode.json',
            dataType:'json',
            data:{
                mobile:$('#phone').val(),
                companyCode:getItem('companyCode'),
            },
            type:'post',
            success:function (data) {
                if(data.code==1){
                    if(data.ifCode){
                        //如果为true，从本地获取图片验证码
                        verifyCode = getItem('verifyCode');
                        verify();
                    }else{
                        //如果为false，需要输入
                        var timestamp = (new Date()).valueOf();
                        $("#imgObj").attr("src","/imageVerifyC/validateCode.json?mobile="+$('#phone').val()+"&t="+timestamp);
                        $('#code_input').val('');
                        $('.zhezhao').show();
                    }
                }
                if(data.code==0){
                    mui.toast(data.msg);
                    return
                }
            }
        })
    }

    function verify() {
        $(".code-button").html("发送中…");
        $(".code-button").unbind();
        $.ajax({
            url:'/user/sendMobileCode_ValidateCode.json',
            data:{
                mobile:$('#phone').val(),
                platform:'wap',
                validateCode:verifyCode,
                companyCode:getItem('companyCode'),
            },
            dataType:'json',
            success:function(data) {
                if(data.code!=1){
                    alert(data.msg);
                    $(".code-button").html("重新发送");
                    $(".code-button").bind('click',sendCode);
                    return;
                }
                timeUpdate.init($(".code-button"), 60);

            }
        })
    }

    var timeUpdate = {
        node:null,//节点
        time:60,//时间
        //主函数
        start:function(){
            if(this.time > 0){
                $(this.node).html( this.time-- + 's后重发');
                var _this = this;
                setTimeout(function(){
                    _this.start();
                },1000);
            }else{
                this.node.click(function () {
                    sendCode();
                });
                this.node.html("重新发送");
            }
        },
        //初始化
        init:function(node, timeLimit){
            this.node = node;
            this.time = timeLimit;
            this.start();
        }
    };

    document.getElementById('verify_certain').addEventListener('tap',function () {
        $.ajax({
            //验证码是否正确接口
            url:'/imageVerifyC/verifyCode.json',
            dataType:'json',
            data:{
                mobile:$('#phone').val(),
                validateCode:$('#code_input').val(),
                companyCode:getItem('companyCode'),
            },
            type:'post',
            success:function (data) {
                if(data.code!=1){
                    mui.toast(data.msg);
                    return;
                }
                if(data.code==1){
                    if(data.verifyCode){
                        $('.zhezhao').hide();
                        twice=true;
                        verifyCode = $('#code_input').val();
                        setItem('verifyCode',$('#code_input').val());
                        verify();
                    }else{
                        mui.toast('验证码错误');
                        $('#code_input').val('');
                        var timestamp = (new Date()).valueOf();
                        $("#imgObj").attr("src","/imageVerifyC/validateCode.json?mobile="+$('#phone').val()+"&t="+timestamp);
                        return;
                    }
                }
            }
        })
    })


    //关闭验证窗口
    $('#close').click(function () {
        $('.zhezhao').hide();
    })

</script>
</body>
</html>
